<!-- components/CheckboxGroup.vue -->
<template>
  <el-form-item 
    :label="isMobile ? '' : label" 
    :prop="prop"
    :label-width="isMobile ? '0' : undefined"
  >
    <div class="checkbox-group-container">
      <div v-if="isMobile" class="mobile-label">{{ label }}</div>
      <el-checkbox-group
        v-model="selectedValues"
        @change="handleChange"
        class="checkbox-group"
        :class="{ 'mobile-checkbox-group': isMobile }"
      >
        <el-checkbox
          v-for="(item, index) in options"
          :key="index"
          :label="item.name"
          :value="item.id"
          :class="{ 'mobile-checkbox': isMobile }"
        />
      </el-checkbox-group>
    </div>
  </el-form-item>
</template>

<script setup>
const props = defineProps({
  label: {
    type: String,
    required: true,
  },
  prop: {
    type: String,
    required: true,
  },
  modelValue: {
    type: Array,
    default: () => [],
  },
  options: {
    type: Array,
    default: () => [],
  },
  isMobile: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update:modelValue", "change"]);

const selectedValues = computed({
  get: () => props.modelValue,
  set: (value) => emit("update:modelValue", value),
});

const handleChange = (values) => {
  emit("change", values);
};
</script>

<style scoped>
.checkbox-group-container {
  width: 100%;
}

.mobile-label {
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--el-text-color-primary);
  font-size: 14px;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: 5px;
}

.mobile-checkbox-group {
  gap: 8px 12px;
}

:deep(.mobile-checkbox .el-checkbox__label) {
  font-size: 14px;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .checkbox-group {
    gap: 8px 16px;
  }
  
  :deep(.el-checkbox) {
    margin-right: 0;
  }
}
</style>